<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Dizeez: Help science through gaming!</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Actor" type="text/css">
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div id="dizeez-app">
      <div id="menu">
        <ul id="menu-nav">
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/tutorial">Tutorial</a>
          </li>
          <li>
            <a href="http://www.genegames.org">Gene Games</a>
          </li>
      </div>
      <div id="notifications">
      </div>
      <div id="sidebar">
          <p id="side-msg">Did you mean:</p>
          <div id="autocomplete">
          </div>
      </div>
      <div id="user-info">
      </div>
      <div id="score">
      </div>
      <div id="main">
        <div id="main-container">
          <div id="tutorial-step-1" class="tutorial-step active">
            <h2>1. Start by joining any available open game, or create one!</h2>
            <img class="tutorial-img" src="/img/tutorial/joining.png">
          </div>
          <div id="tutorial-step-2" class="tutorial-step">
            <h2>2. If starting a new game, wait until someone joins your team.</h2>
            <img class="tutorial-img" src="/img/tutorial/challenging.png">
          </div>
          <div id="tutorial-step-3" class="tutorial-step">
            <h2>3. Once both players are ready, the game will begin on this screen.</h2>
            <img class="tutorial-img" src="/img/tutorial/starting.png">
          </div>
          <div id="tutorial-step-4" class="tutorial-step">
            <h2>4. Enter a guess or a hint below, and click an action on the right to give.</h2>
            <img class="tutorial-img" src="/img/tutorial/selecting.png">
          </div>
          <div id="tutorial-step-5" class="tutorial-step">
            <h2>5. If the guesser picks the correct link, your team gains points!</h2>
            <img class="tutorial-img" src="/img/tutorial/matching.png">
          </div>
          <div id="tutorial-step-6" class="tutorial-step">
            <h2>6. However, watch out for time! If you're stuck, just pass.</h2>
            <img class="tutorial-img" src="/img/tutorial/passing.png">
          </div>
          <div id="tutorial-step-7" class="tutorial-step">
            <h2>7. Good luck, and thanks for contributing to science!</h2>
            <img class="tutorial-img" src="/img/tutorial/ending.png">
          </div>
        </div>
        <div id="main-input">
          <div class="browse-btn">
            Use the left and right arrow keys to navigate the tutorial!
          </div>
        </div>
      </div>
    </div>
    <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
    <script type="text/javascript">
        YUI().use('node', 'event', function (Y) {
            var index = 1;
            Y.on('keydown', function (e) {
                if (e.keyCode === 37 && index > 1) {
                    Y.one('#tutorial-step-' + index).removeClass('active');
                    index--;
                    Y.one('#tutorial-step-' + index).addClass('active');
                } else if (e.keyCode === 39 && index < 7) {
                    Y.one('#tutorial-step-' + index).removeClass('active');
                    index++;
                    Y.one('#tutorial-step-' + index).addClass('active');
                }
            });
        });
    </script>
  </body>
</html>
